<template>
  <div class="search-result-container">
    <!-- 点击实现后退效果 -->
    <van-nav-bar title="搜索结果"
                 left-arrow
                 @click-left="$router.go(-1)"
                 fixed />

    <van-list v-model="loading"
              :finished="finished"
              finished-text="没有更多了"
              @load="onLoad"
              offset="50"
              v-if="articleList.length>0">
      <ArticleItem v-for="item,index in articleList"
                   :key="index"
                   :obj="item"
                   :show="false"
                   @click.native="articleFn(item.art_id)"></ArticleItem>
      <!-- 自定义标签上的click事件是自定义事件，可以加.native，让他成为原生事件 -->
    </van-list>

  </div>
</template>

<script>
import ArticleItem from '@/components/ArticleItem.vue'
import { searchListAPI } from '@/api'
export default {
  name: 'SearchResult',
  components: {
    ArticleItem
  },
  data () {
    return {
      page: 1, // 搜索结果页码
      articleList: [], // 文章列表
      finished: false, // 数据是否全部加载完成
      loading: false // 底部加载更多状态

    }
  },

  async created () {
    // const [, res] = await searchListAPI({
    //   // 关键词在动态路由的路径中
    //   q: this.$route.params.keywords, // 路由传参有query和params选项
    //   // 写query,也是在url？参数=值
    //   // 写params也是在url/出现（前提需要在路由规则里配置）
    //   page: this.page
    // })

    // console.log(res)
    // this.articleList = res.data.data.results
    this.getsearchListAPI()
  },
  methods: {
    async getsearchListAPI () {
      const [, res] = await searchListAPI({
        // 关键词在动态路由的路径中
        q: this.$route.params.keywords, // 路由传参有query和params选项
        // 写query,也是在url？参数=值
        // 写params也是在url/出现（前提需要在路由规则里配置）
        page: this.page
      })

      console.log(res)
      // this.articleList = res.data.data.results
      // 如果无数据
      if (res.data.data.results.length === 0) {
        this.finished = true// 告诉数据加载完成了，已经没有数据了，就算触底也不会触发onload事件
      } else {
        this.articleList = [...this.articleList, ...res.data.data.results]
        console.log(this.articleList)
        // 网络请求成功后，将下拉状态改为FALSE,

        // 底部加载更多
        this.loading = false// 确保下一次触底时，可以继续加载数据
      }
    },
    async onLoad () {
      // 加载下一页数据
      this.page++
      this.getsearchListAPI()
    },
    // 点击文章项-挑转传参
    articleFn (art_id) {
      this.$router.push({
        path: '/art_detail',
        query: {
          art_id: art_id
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.search-result-container {
  padding-top: 46px;
}
</style>
